<?php
    use User\Model\QuestionnaireModel;
?>
<style>
    .next-step{height:40px;float:right;padding-top:10px;margin-left:30px;margin-top:-5px}
    .end-setting{color:black;float:right;font-weight: bold}
    .edit-question{color:blue;float:right;font-weight: bold}

    .table>thead>tr>th{text-align: center}
    .table>tbody>tr>td{vertical-align: middle; text-align: center}
    .table>tbody>tr>td>span>i{vertical-align: middle; text-align: center;font-size: 30px}
    .background-image{float: right}
    .question-random{float: right; margin-right:7px}

    .modal1-text{width:80%}
    .modal1-upload{position:absolute;right:20px;width:60px;height:35px;top:25px;opacity:0;z-index:1}
    .modal1-button{position:absolute;right:20px;top:20px}

    .modal2-random{padding-top:40px}
    .modal2-button{border:0;background-color:white;}
    .modal-footer{text-align: center}

</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <span>题目设置</span>
                <a href="/User/Questionnaire/ending?questionnaire_id={$questionnaire_id}" class="btn btn-default next-step">&nbsp;下一步&nbsp;</a>
                <span class="end-setting">&nbsp;结束页设置</span>
                <span class="edit-question">创建题目&nbsp;></span>
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a href="javascript:;">主干题目</a></li>
                        <li><a href="/User/Questionnaire/branchQuestion?id={$questionnaire_id}">分支题目</a></li>
                    </ul>
                </div>
                <div class="panel-heading" style="background-color:white;border:0">
                    <a style="margin-left:7px" href="/User/Questionnaire/editQuestion?questionnaire_id={$questionnaire_id}" class="btn btn-success">新建</a>
                    <a href="javascript:;" id="deleteAll" class="btn btn-danger">删除</a>
                    <a href="javascript:;" onclick="$('#modal1').modal('show');" class="btn btn-warning background-image">背景图设置</a>
                    <a href="javascript:;" onclick="$('#modal2').modal('show');" class="btn btn-info question-random">题库随机设置</a>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="5%"><input type="checkbox" id="selectAll"></th>
                                <th width="10%">编号</th>
                                <th width="50%">标题</th>
                                <th width="20%">操作</th>
                                <th width="15%">排序</th>
                            </tr>
                            </thead>
                            <tbody class="sortablelist">
                            <volist name="list" id="item">
                                <tr class="sortableitem tr-{$item.id}" data-id="{$item.id}">
                                    <td><input type="checkbox" name="ids" value="{$item.id}"></td>
                                    <td>{$item.displayorder}</td>
                                    <td>
                                        <empty name="item.title_image">
                                            {$item.title}
                                        <else />
                                            <img src="{$item.title_image}" width="100px" height="100px">
                                        </empty>
                                    </td>
                                    <td>
                                        <a type="button" href="/User/Questionnaire/editQuestion?question_id={$item['id']}&questionnaire_id={$questionnaire_id}" class="btn btn-info">编辑</a>
                                        <a type="button" href="javascript:;" onclick="return deleteQuestion({$item['id']});" class="btn btn-danger">删除</a>
                                    </td>
                                    <td><span class="moveup"><i class="fa fa-arrow-circle-o-up"></i></span>&nbsp;&nbsp;<span class="movedown"><i class="fa fa-arrow-circle-o-down"></i></span></td>
                                </tr>
                            </volist>
                            </tbody>
                        </table>
                    </div>
                    <div class="pages">
                        <!--{$page}-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel1" role="dialog" tabindex="-1" id="modal1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">背景图设置</h4>
            </div>
            <div class="modal-body">
                <empty name="questionnaire.background_question">
                    <input type="text" class="form-control modal1-text" value="/Public/images/questionnaire/question_background.jpg" readonly>
                <else/>
                    <input type="text" class="form-control modal1-text" value="{$questionnaire['background_question']}" readonly>
                </empty>
                <input type="file" class="modal1-upload" onchange="uploadImage(this, ['png','jpg','jpeg','bmp','gif'], [750, 1260], 500, true, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                <button class="btn btn-default modal1-button">上 传</button>
                <p class="help-block">&nbsp;&nbsp;有默认的题目背景图片，可自定义替换</p>
                <p class="help-block">&nbsp;&nbsp;图片为750px*1260px的png、jpg、jpeg、bmp、gif格式图片，大小不超过500k</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" onclick="uploadBackgroundImage();">确定</button>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel2" role="dialog" tabindex="-1" id="modal2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">题库随机设置</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="col-lg-10">
                        <label class="radio-inline">
                            <input type="radio" name="has_random" onclick="$('.modal2-random').hide();" <if condition="$questionnaire.has_random eq QuestionnaireModel::RANDOM_OFF">checked="checked"</if> value="<?php echo QuestionnaireModel::RANDOM_OFF; ?>">不使用
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="has_random" onclick="$('.modal2-random').show();" <if condition="$questionnaire.has_random eq QuestionnaireModel::RANDOM_ON">checked="checked"</if> value="<?php echo QuestionnaireModel::RANDOM_ON; ?>">随机抽取题目
                        </label>
                    </div>
                    <div class="modal2-random" <if condition="$questionnaire.has_random eq QuestionnaireModel::RANDOM_OFF">style="display: none;"</if>>
                        <div class="input-group">
                            <span class="input-group-addon">从题目</span><input type="text" class="form-control from" value="{$random1['from']}">
                            <span class="input-group-addon">到题目</span><input type="text" class="form-control to" value="{$random1['to']}">
                            <span class="input-group-addon">中随机抽</span><input type="text" class="form-control count" value="{$random1['count']}">
                            <span class="input-group-addon">个题目</span>
                            <span class="input-group-addon modal2-button" onclick="randomPlus();"><i class="fa fa-plus"></i></span>
                            <span class="input-group-addon modal2-button" onclick="randomMinus();"><i class="fa fa-minus"></i></span>
                        </div>
                        <volist name="random_list" id="rand">
                            <div class="input-group">
                                <span class="input-group-addon">从题目</span><input type="text" class="form-control from" value="{$rand.from}">
                                <span class="input-group-addon">到题目</span><input type="text" class="form-control to" value="{$rand.to}">
                                <span class="input-group-addon">中随机抽</span><input type="text" class="form-control count" value="{$rand.count}">
                                <span class="input-group-addon">个题目</span>
                                <span class="input-group-addon modal2-button" onclick="randomPlus();"><i class="fa fa-plus"></i></span>
                                <span class="input-group-addon modal2-button" onclick="randomMinus();"><i class="fa fa-minus"></i></span>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" onclick="setRandomQuestion();">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/Public/js/common/jquery.clickSort.js"></script>
<script type="text/javascript" src="/Public/js/common/check-upload-file.js"></script>
<script>
    $(function(){
        $('.sortablelist').clickSort();
    })

    $("#selectAll").click(function(){
        if($(this).prop('checked') == true){
            $("input[name=ids]").prop('checked',true);
        }else{
            $("input[name=ids]").prop('checked',false);
        }
    })

    $("#deleteAll").click(function(){
        if(!confirm('确认删除吗？')) return false;
        var ids = "";
        $("input[name=ids]").each(function() {
            if($(this).prop("checked")){
                ids += $(this).val() + "|";
            }
        });
        if(ids != ''){
            $.ajax({
                data: {ids: ids},
                dataType: 'json',
                url: '/User/Questionnaire/deleteQuestions',
                type: 'get',
                success: function (res) {
                    alert(res['info']);
                    window.location.reload();
                }
            });
        }else{
            alert('请勾选题目！');
        }
    });

    function deleteQuestion(id){
        if(!confirm('确认删除吗？')) return false;
        $.ajax({
            data: {id: id},
            dataType: 'json',
            url: '/User/Questionnaire/deleteQuestion',
            type: 'get',
            success: function (res) {
                alert(res['info']);
                window.location.reload();
            }
        });
        return false;
    }

    function randomPlus(){
        var random_count = parseInt($(".input-group").length);
        if(random_count >= 3){
            alert("最多设置3个随机抽取条件");
        }else{
            var html = '';
            html += '<div class="input-group">';
            html += '    <span class="input-group-addon">从题目</span><input type="text" class="form-control from" value="">';
            html += '    <span class="input-group-addon">到题目</span><input type="text" class="form-control to" value="">';
            html += '    <span class="input-group-addon">中随机抽</span><input type="text" class="form-control count" value="">';
            html += '    <span class="input-group-addon">个题目</span>';
            html += '    <span class="input-group-addon modal2-button" onclick="randomPlus();"><i class="fa fa-plus"></i></span>';
            html += '    <span class="input-group-addon modal2-button" onclick="randomMinus();"><i class="fa fa-minus"></i></span>';
            html += '</div>';
            $(".modal2-random").append(html);
        }
    }

    function randomMinus(){
        $(event.target).closest(".input-group").remove();
    }

    function setRandomQuestion(){
        var questionnaire_id = '<?php echo $questionnaire_id; ?>';
        var has_random = $("input[name=has_random]:checked").val();
        var from = "";
        var to = "";
        var count = "";
        if(has_random == '<?php echo QuestionnaireModel::RANDOM_ON; ?>'){
            $(".from").each(function () {
                from += $(this).val() + "|";
            })

            $(".to").each(function () {
                to += $(this).val() + "|";
            })

            $(".count").each(function () {
                count += $(this).val() + "|";
            })
        }
        var url = "/User/Questionnaire/setRandomQuestion";
        $.ajax({
            url: url,
            type:"post",
            dataType: 'json',
            data:{questionnaire_id: questionnaire_id, has_random: has_random, from: from, to: to, count: count},
            success:function(result){
                alert(result.msg);
                $('#modal2').modal('hide');
            }
        });
    }

    function uploadImage(c, types, size, kb, isCheck, isImage){
        var img = c.files[0];
        var _this = $(c);
        var url = "/User/Questionnaire/uploadFile";
        checkFile(_this, img, types, size, kb, isCheck, isImage, url);
    }

    function uploadBackgroundImage(){
        var background_question = $(".modal1-text").val();
        var questionnaire_id = '<?php echo $questionnaire_id; ?>';
        if(!background_question){
            alert("请上传背景图");
        }
        var url = "/User/Questionnaire/uploadBackgroundImage";
        $.ajax({
            url: url,
            type:"post",
            dataType: 'json',
            data:{ background_question: background_question, questionnaire_id: questionnaire_id},
            success:function(result){
                alert(result.msg);
                $('#modal1').modal('hide');
            }
        });
    }

    function callback(id1, id2){
        var url = "/User/Questionnaire/updateSort";
        $.ajax({
            url: url,
            type:"post",
            dataType: 'json',
            data:{ id1: id1, id2: id2},
            success:function(result){
                $(".tr-" + id1).find("td:eq(1)").html(result.displayorder1);
                $(".tr-" + id2).find("td:eq(1)").html(result.displayorder2);
            }
        });
    }
</script>